import { ArrayMethods } from "./arr";

// 数据：对象、数组
export function observer(data) {
  // console.log(data);
  // 判断
  if (typeof data != "object" || data == null) {
    return data;
  }
  // 对象类型数据 Object.defineProperty
  return new Observer(data);
}

class Observer {
  constructor(val) {
    Object.defineProperty(val, "__ob__", {
      enumerable: false,
      value: this,
    });
    // console.log(val);
    // 判断数据为数组
    if (Array.isArray(val)) {
      // @ts-ignore
      val.__proto__ = ArrayMethods;
      this.observeArray(val); // [{a: 1}]
    } else {
      this.walk(val); // 遍历
    }
  }
  walk(data) {
    let keys = Object.keys(data);
    for (let i = 0; i < keys.length; i++) {
      // 对每个属性进行劫持
      let key = keys[i];
      let value = data[key];
      defineReactive(data, key, value);
    }
  }
  observeArray(value) {
    // [{a: 1}]
    for (let i = 0; i < value.length; i++) {
      observer(value[i]);
    }
  }
}

function defineReactive(data, key, value) {
  // {a: {b: 1}} 递归
  observer(value); // 深度代理
  Object.defineProperty(data, key, {
    get() {
      return value;
    },
    set(newValue) {
      if (newValue == value) return;
      observer(newValue); // 如果设置的值是对象，递归
      value = newValue;
    },
  });
}
